<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Responsive Media Chrome Example</title>
    <script type="module" src="../../dist/index.js"></script>
  </head>
  <body>
    <main>
      <h1>Responsive Media Chrome Example</h1>

      <p>This is an example of making Media Chrome responsinve using Container Queries (CQ).</p>

      <media-controller defaultsubtitles>
        <video
          slot="media"
          src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
          muted
          crossorigin="anonymous"
          playsinline
        >
          <track
            label="thumbnails"
            default
            kind="metadata"
            src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/storyboard.vtt"
          />
          <track
            label="English"
            kind="captions"
            srclang="en"
            src="./vtt/en-cc.vtt"
          />
        </video>
        <media-poster-image
          slot="poster"
          src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/thumbnail.jpg"
          placeholdersrc=""
        ></media-poster-image>
        <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
        <div slot="centered-chrome" class="centered-controls-overlay">
          <media-seek-backward-button></media-seek-backward-button>
          <media-play-button></media-play-button>
          <media-seek-forward-button></media-seek-forward-button>
        </div>
        <media-control-bar>
          <media-play-button></media-play-button>
          <media-seek-backward-button seekoffset="15"></media-seek-backward-button>
          <media-seek-forward-button seekoffset="15"></media-seek-forward-button>
          <media-mute-button></media-mute-button>
          <media-volume-range></media-volume-range>
          <media-time-range></media-time-range>
          <media-time-display showduration remaining></media-time-display>
          <media-captions-button></media-captions-button>
          <media-playback-rate-button></media-playback-rate-button>
          <media-pip-button></media-pip-button>
          <media-fullscreen-button></media-fullscreen-button>
          <media-airplay-button></media-airplay-button>
        </media-control-bar>
      </media-controller>

      <p>This uses the latest and greatest syntax, specifically using the range operators</p>
      <pre style="margin-left: 1em"><code>@container (420px < inline-size <= 590px)</code></pre>
      <p>
        This allows the example to be a bit more concise.
        However, this is not supported in the CQ polyfill
        and if you want to support browsers that do not currently have CQ support
        you may want to take a look at the
        <a href="./responsive-polyfill.html">Responsive Polyfill</a> example.
        Though, alternatives will be provided in the comments.
      </p>
      <p>
        Below is the style tag for this page.
        Take a look at the code comments that explain the usage.
      </p>
      <style>
media-controller:not([audio]) {
  display: block;
  max-width: 1280px;
  aspect-ratio: 16 / 9;

  /*
   * set media-controller as a container for Container Queries (CQ)
   *
   * This names the container as "media-chrome"
   * and says that we only care about inline-size (aka width)
   */
  container: media-chrome / inline-size;
}
video {
  width: 100%;
}

/*
 * By default, we don't want the center controls to show up.
 */
.centered-controls-overlay {
  display: none;
}

/*
 * Starting with the smallest container, this query will be selected
 * if the inline-size of the contrainer is smaller than 420px.
 *
 * It only shows the center controls and hides the bottom control bar.
 *
 * Alternatively, you can use
 *   @container (max-width: 420px);
 */
@container (inline-size < 420px) {
  .centered-controls-overlay {
    display: flex;
  }
  media-control-bar {
    display: none;
  }
}

/*
 * The middle container size will be selected if the width is between 420px and 590px.
 *
 * Here, move the player toggle and the seek buttons from the bottom
 * control bar to the center controls section to give more breathing
 * room for the other buttons in the control bar.
 *
 * Alternatively, you can use
 *   @container (min-width: 420px) and (max-width: 590px)
 */
@container (420px <= inline-size <= 590px) {
  .centered-controls-overlay {
    display: flex;
  }
  media-control-bar {
    display: flex;
  }
  media-control-bar media-play-button,
  media-control-bar media-seek-backward-button,
  media-control-bar media-seek-forward-button {
    display: none;
  }
}

/*
 * The default and large container size,
 * which will be selected when the container is greater than 590px wide.
 *
 * Since we have a default to hide the .centered-controls-overlay,
 * this query isn't strictly necessary but is included for the sake of completeness.
 *
 * Alternatively, you can use
 *   @container (min-width: 590px);
 */
@container (inline-size > 590px) {
  .centered-controls-overlay {
    display: none;
  }
  media-control-bar {
    display: flex;
  }
}

/*
 * Some styles to make the center controls look nicer.
 *
 * Use :where here so that it doesn't override
 * the centered-controls-overlay styles from above.
 */
:where(.centered-controls-overlay) {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-evenly;
}
media-controller .centered-controls-overlay {
  align-self: stretch;
}
[slot='centered-chrome'] {
  margin: 0 15%;
  --media-control-hover-background: none;
  --media-control-background: none;
}
[slot='centered-chrome']:is(media-play-button, media-seek-backward-button, media-seek-forward-button) {
  padding: 0px;
}
[slot='centered-chrome']media-play-button {
  width: 20%;
}
[slot='centered-chrome']:is(media-seek-backward-button, media-seek-forward-button) {
  width: 15%;
}

/*
 * Make the loading spinner take up the entire player size and not
 * interfere with the center controls by setting position to absolute.
 */
media-loading-indicator {
  position: absolute;
  inset: 0;
}

/*
 * Hide unavailable buttons.
 */
media-airplay-button[mediaairplayunavailable],
media-fullscreen-button[mediafullscreenunavailable],
media-volume-range[mediavolumeunavailable],
media-pip-button[mediapipunavailable] {
  display: none;
}

/*
 * Make the style element show up on the page
 */
style {
  display: block;
  white-space: pre;
  font-family: monospace;
  margin-left: 1em;
  overflow-x: auto;
}
      </style>
      <div class="examples">
        <a href="./">View more examples</a>
      </div>
    </main>
  </body>
</html>
